<template>
  <el-dialog
    title="添加用户"
    width="70%"
    :append-to-body="true"
    :visible.sync="showTag"
  >
    <el-form :model="form" label-width="80px" size="mini">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="!info.id" :span="12">
          <el-form-item label="密码">
            <el-input v-model="form.pass" show-password></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="手机号">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证">
            <el-input v-model="form.idcard"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="地区">
            <el-cascader
              :key="info.id || '0'"
              v-model="form.area_code"
              :props="props"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="头像">
            <el-upload
              :action="uploadUrl"
              list-type="picture"
              :file-list="fileList"
              :limit="1"
              :on-success="onSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="生日">
            <el-date-picker
              v-model="form.birthday"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-select v-model="form.sex">
              <el-option
                v-for="(value, key) in sexOptions"
                :key="key"
                :value="key"
                :label="value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族">
            <el-input v-model="form.minzu"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="hide">
        取消
      </el-button>
      <el-button type="primary" :loading="appLoading" size="mini" @click="sub">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import { AppLoadingMixin } from "../../lib/mixins/app-loading";
import { FIELDS } from "../../lib/tables/user";
import { stateTypes } from "../../store/admin";
import { UploadMixin } from "../../lib/mixins/upload";
import { AreaMixin } from "../../lib/mixins/AreaMixin";
import { SEX } from "../../lib/config";
import { getAreaCodeArray, getFileObjectByUrl } from "../../lib/utils";

export default {
  name: "UserAddDialog",
  mixins: [AppLoadingMixin, UploadMixin, AreaMixin],
  data() {
    return {
      form: {},
      fileList: [],
      sexOptions: SEX,
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad
      },
      info: {},
      showTag: false
    };
  },
  computed: {
    ...mapState("admin", [stateTypes.loginInfo])
  },
  methods: {
    async show(data) {
      if (data && data.id) this.info = await this.$userService.detail(data.id);
      this.setForm();
      this.showTag = true;
    },
    hide() {
      this.resetForm();
      this.showTag = false;
    },
    setForm() {
      const { info } = this;
      FIELDS.forEach(r => {
        info && r in info && this.$set(this.form, r, info[r]);
      });
      if (info.ava) {
        this.fileList = [getFileObjectByUrl(info.ava)];
      } else {
        this.fileList.splice(0);
      }

      if (info.area_code) {
        this.form.area_code = getAreaCodeArray(info.area_code);
      }
    },
    resetForm() {
      FIELDS.forEach(r => {
        this.$set(this.form, r, null);
      });
    },
    onSuccess(response) {
      const { data, errno } = response;
      if (errno === 0) this.$set(this.form, "ava", data.url);
    },
    async lazyLoad(node, resolve) {
      const { level, value } = node;
      const data = await this.areaGetList();
      let list;
      let res = [];
      if (level === 0) {
        list = data.province_list;
      } else if (level === 1) {
        list = data.city_list;
      } else {
        list = data.county_list;
      }

      // eslint-disable-next-line no-unused-vars
      for (const key in list) {
        const label = list[key];
        res.push({
          value: key,
          label,
          leaf: level === 2 || (key.indexOf("9") === 0 && level === 1) || false
        });
      }
      if (level === 1) {
        res = res.filter(r => r.value.indexOf(value.substr(0, 2)) === 0);
      } else if (level === 2) {
        res = res.filter(r => r.value.indexOf(value.substr(0, 4)) === 0);
      }
      resolve(res);
    },
    async sub() {
      const form = { ...this.form };
      if (Array.isArray(form.area_code)) {
        form.area_code = form.area_code.pop();
      }
      if (form.pass) {
        // eslint-disable-next-line no-undef
        form.pass = hex_md5(form.pass);
      }
      if (form.id) {
        if (await this.$userService.update(form)) {
          this.hide();
          this.$message.success("修改成功");
          this.$emit("ok", form.id);
        }
        return;
      }
      let id;
      if ((id = await this.$userService.add(form))) {
        this.hide();
        this.$message.success("添加成功");
        this.$emit("ok", id);
      }
    }
  }
};
</script>

<style scoped></style>
